// --- echarts 按需引入
import * as echarts from 'echarts'
// 引入饼图图表、折线图、柱状图---图表后缀都为 Chart
import { PieChart, LineChart, BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  // Toolbox和Legend
  ToolboxComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  // 使用时导入的
  ToolboxComponent,
  LegendComponent,
  LineChart,
  // 饼图
  PieChart
])

/**
 * 需要mounted 获取到 el 后执行
 * @param {HTMLElement} el
 * @returns
 */
export default function (el) {
  // 初始化图表，
  const myCharts = markRaw(echarts.init(el))

  // 设置配置项
  const setOptions = (opt) => myCharts?.setOption(opt)
  // resize
  const resizeChart = () => myCharts?.resize()

  // 监听 resize
  window.addEventListener('resize', useThrottleFn(resizeChart, 10), false)

  onBeforeMount(() => {
    window.removeEventListener('resize', resizeChart, false)
  })

  // 返回echarts实例等
  return { myCharts, setOptions, resizeChart }
}
